<template>
  <div class="container">
    <scroll-view :scroll-y="true"
                 :style="{'height': '93%'}"
                 @scroll="scrollmain"
                 @scrolltolower="pullrefresh">
      <!-- 项目详情 -->
      <div class="project-detail">
        <div class="project-logo">
          <img :src="imgUrl+order_data.image"
               v-if="imgUrl&&order_data.image"
               alt
               class="img" />
        </div>
        <div class="project-info">
          <div class="project-name">{{order_data.project_name}}</div>
          <div class="hos-name">{{order_data.hospitals_name}}</div>
          <div class="project-price">
            <div class="rmb">
              <div class="icon">￥</div>
              <div class="num">{{order_data.origin_price}}</div>
            </div>
          </div>
        </div>
      </div>
      <doctorList :doctorList="doctorList"
                  ref="mychild"
                  @click="doctorDetail"
                  v-if="doctorList&&doctorList.length > 0"></doctorList>
      <div class="main-form">
        <view class="section"
              v-if="mall.activity_status !== 2 && mall.activity_status !== 4">
          <view class="section__title"></view>
          <picker mode="date"
                  :value="date"
                  :start="currentdate"
                  :end="end_time"
                  @change="bindDateChange">
            <view class="picker">
              <div class="tip">
                预约时间
              </div>
              <span class="style?'date_unde':'date_value'">{{date}}</span>
              <img src="https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/xiayibu@2x.png"
                   alt
                   class="right" />
            </view>
          </picker>
        </view>
        <div class="text">
          <div class="tip">
            微信号
          </div>
          <input type="text"
                 placeholder="请输入（选填）"
                 class="tel_input"
                 v-model="wetchartNum"
                 @input="clearEmoji" />
        </div>
        <div class="text text1">
          <div class="tip">
            推荐人
          </div>
          <input type="number"
                 placeholder="请输入推荐人手机号（选填）"
                 class="tel_input"
                 :disabled="isPhone"
                 v-model="telNum"
                 @blur="focusInput"
                 maxlength="11" />
        </div>
      </div>
      <!-- 优惠券 -->
      <div class="ticket-bar clearfix">
        <div class="t-name">
          优惠券
          <span class="t-tip" v-if="order_data.ticket_name&&order_data.ticket_name!=''">
            {{order_data.ticket_name||""}}
          </span>
        </div>
        <div class="t-money">
          -¥{{order_data.origin_price}}
        </div>
      </div>
      <!-- 订单信息 -->
      <ul class="order-info clearfix">
        <li class="info-item clearfix">
          <div class="item-l">项目价格</div>
          <div class="item-r price">
            <!-- 现金 -->
            <div class="money">￥{{order_data.origin_price}}</div>
          </div>
        </li>
        <li class="info-item clearfix">
          <div class="item-l">优惠券抵扣</div>
          <div class="item-r price">
            <!-- 现金 -->
            <div class="money">￥{{order_data.origin_price}}</div>
          </div>
        </li>
      </ul>
      <!-- 成年人提示 -->
      <div class="adult">
        <img :src="ImgBaseUrl+'/mp_3.1.6/提示图标/安卓/hdpi/提示.png'"
             v-if="ImgBaseUrl"
             alt
             class="icon" />
        预约成功后，客服会在您预约的前一天联系您
      </div>

    </scroll-view>
    <!-- 底部栏 -->
    <div class="bottom-bar">
      <button class="submit-btn"
              @tap="submitBooking()">立即预约</button>
      <div class="total_bottom">
        合计:
        <span class="money_icon">￥</span>
        <span class="money">0</span>
      </div>
    </div>
  </div>
</template>
<script>
import doctorList from "@/components/doctorList/doctorList";
import common from "@/assets/js/mmk_common.js";
import pay from "@/assets/js/pay1.js";
import imageurl from "@/assets/js/image.js";
imageurl;
export default {
  data () {
    return {
      imgUrl: common.image_response,
      ImgBaseUrl: common.image_resource,
      date: "请选择预约时间",
      style: true,
      ishow: false,
      mall: [],
      ticket_array: [],
      //   保存原始优惠券
      ticket_list: [],
      ticket_id: 0, //优惠券id,
      ticket_data: {},
      telNum: "",
      totalCost: 0,
      order_sn: "",
      mallID: "",
      start: "",
      currentdate: "",
      isDisabled: false,
      referee_realname: "",
      discount: "", //优惠券满减金额
      ticket_name: "",
      isPhone: true,
      wetchartNum: "", //微信号
      ticket_mark: false, //优惠券弹窗标识
      collected: true, //优惠券是否领取
      appointment_price: 0,
      end_time: "",
      type: "", //项目提交的类型
      type_name: "",
      kou_credit: 0, //积分抵扣
      deduction_credit: 0,
      user_credit: 0, //用户的可用积分（计算）
      all_price: 0,
      doctorList: [],
      activity_status: "",
      showPrice: "", //总价，展示不计算
      real_kou: 0,
      user_credit_mask: "", //弹窗显示
      text_mask: "",
      project_type: "",
      endtime: 0,
      start_year: new Date().getFullYear() - 0,
      start_month: new Date().getMonth() - 0 + 1,
      start_date: new Date().getDate() - 0,
      dikou_point: 0.0,//抵扣积分后的金额,
      plus_price: null,
      order_data: {},
      card_name: "女王卡"
    };
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data());
    this.style = true;
    if (options.card_name) {
      this.card_name = options.card_name
    }
    if (options.ticket_id) {
      this.ticket_id = options.ticket_id
    }
    //项目详情传过来的商品id
    if (options.id) {
      this.mallID = options.id;
    }
    this.discount = "";
    this.ticket_mark = false;
    this.currentdate = "";
    this.end_time = "";
    this.endtime = 0;
    this.wetchartNum = "";
    if (options.tg == 1 || options.activity_project_status == 1) {
      //tg == 1 全款项目 ，activity_project_status == 1 抢购项目
      this.project_type = 1;
      wx.setStorageSync("confirm_title", "确认订单");
      wx.setNavigationBarTitle({
        title: wx.getStorageSync("confirm_title")
      });
    } else {
      this.project_type = 0;
      wx.setStorageSync("confirm_title", "确认预约");
      wx.setNavigationBarTitle({
        title: wx.getStorageSync("confirm_title")
      });
    }

    if (!wx.getStorageSync("user_data").referee_phone) {
      this.isPhone = false; //没有服务商号码
    } else {
      this.isPhone = true;
      this.telNum = wx.getStorageSync("user_data").referee_phone;
    }
    this.type_name = "";
    // this.getEndtime()
    this.getData();
    this.getInfoData();
  },
  onShow () {
    // this.telNum = "";
    this.date = "请选择预约时间";
    // this.getNowFormatDate();
    this.style = true;
    this.ticket_array = [];
    this.discount = 0;
    this.currentIndex = "";
    this.type_name = "";
    this.ticket_mark = false;
    this.currentdate = "";
    this.end_time = "";
    this.endtime = 0;
    this.wetchartNum = "";
    if (!wx.getStorageSync("user_data").referee_phone) {
      this.isPhone = false; //没有服务商号码
      this.telNum = "";
    } else {
      this.isPhone = true;
      this.telNum = wx.getStorageSync("user_data").referee_phone;
    }
    this.getData();
    this.getInfoData();
    // this.getEndtime()
  },
  components: {
    doctorList
  },
  mounted () { },
  methods: {
    //商品信息
    getData () {
      //预约项目
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_2/queen/get_detail",
        {
          project_id: this.mallID,
          ticket_id: this.ticket_id,
          user_id: wx.getStorageSync("user_id")
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.status_code == 0) {
            this.mall = res.data;
            this.order_data = res.data
            console.log(this.order_data);

            this.doctorList = res.data.project_doctors;
            this.activity_status = res.data.activity_status; //项目种类
            console.log('activity_status' + this.activity_status);
            this.deduction_credit = res.data.deduction_credit || 0;
            if (res.data.deduction_credit > res.data.user_credit) {
              this.real_kou = res.data.user_credit;
              // this.real_kou = 500
            } else {
              this.real_kou = res.data.deduction_credit;
              // this.real_kou = 500
            }
            if (this.activity_status == 4) {
              this.showPrice = res.data.project_price;
              this.user_credit = res.data.user_credit;
              // this.user_credit =500;
              this.all_price = res.data.project_price;
              setTimeout(() => {
                this.point_init();
              }, 500);
            } else {
              this.all_price = res.data.appointment_price;
              this.appointment_price = res.data.appointment_price;
              this.showPrice = res.data.appointment_price;
            }
            // this.kou_credit = res.data.deduction_credit;
            if (res.data.ticket) {
              // this.isTicket = true;
              this.ticket_list = res.data.ticket;
              this.ticket_list.forEach(element => {
                element.end = new Date(element.send_end_time * 1000).Format(
                  "yyyy.MM.dd"
                );
                element.start = new Date(element.send_start_time * 1000).Format(
                  "yyyy.MM.dd"
                );
                element.is_use = 1;
              });
              this.ticket_array = [...this.ticket_list];
            }

            this.endtime = res.data.last_time;
            this.getEndtime();
          } else {
            common.mmk_Loading(2, res.message);
            return false;
          }
        }
      );
    },
    getInfoData () {
      common.mmk_Loading(0);
      setTimeout(() => {
        common.fly_post("api/v4_2/my_info_detail", "", result => {
          let res = result.data;
          common.mmk_Loading(1);
          if (res.status_code == 0) {
            this.telNum = res.data.referee_phone;
            wx.setStorageSync("user_data", res.data);
          } else {
            common.mmk_Loading(2, res.message);
          }
        });
      }, 200);
    },
    // 日期选择器
    bindDateChange: function (e) {
      this.style = false;
      this.date = e.target.value;
    },
    focusInput () {
      let re = /^[1][2,3,4,5,6,7,8][0-9]{9}$/;
      if (!re.test(this.telNum)) {
        wx.showToast({
          title: "请输入正确的手机号",
          icon: "none",
          duration: 2000,
          mask: true
        });
      } else {
        return false;
      }
    },
    //提交订单
    submitBooking () {
      let that = this;
      if (!wx.getStorageSync("user_token")) {
        wx.navigateTo({ url: "/pages/package_main/login/main" });
      }
      if (
        that.style &&
        this.mall.activity_status !== 2 &&
        this.mall.activity_status !== 4
      ) {
        common.mmk_Loading(2, "请填写预约日期");
        return false;
      }
      common.mmk_Loading(1);
      if (parseFloat(this.totalCost) <= 0) {
        that.conmit("1");
      } else {
        if (that.activity_status == 4 && this.kou_credit > 0) {
          //积分抵扣项目
          if (this.user_credit_mask > 0) {
            this.text_mask =
              "积分（含可提现积分" + this.user_credit_mask + "）";
          } else {
            this.text_mask = "";
          }
          wx.showModal({
            title: "",
            content:
              "本次消费将消耗" +
              this.kou_credit +
              this.text_mask +
              "，是否继续",
            showCancel: true,
            cancelText: "取消",
            cancelColor: "#666",
            confirmText: "继续",
            confirmColor: "#FF383E",
            success: res => {
              if (res.confirm) {
                that.conmit("2");
              } else if (res.cancel) {
              }
            }
          });
        } else {
          this.conmit("2");
        }
      }
    },
    conmit (num) {
      let that = this
      console.log(this.ticket_id);

      if (this.telNum == null) {
        this.telNum = "";
      }
      let obj, api;
      api = "/api/v4_2/queen/submit";
      obj = {
        project_id: that.mallID,
        service_phone: that.telNum,
        credit: that.kou_credit,
        hospital_id: that.mall.hospital_id,
        wechat: that.wetchartNum,
        ticket_id: that.ticket_id
      };
      if (this.activity_status == 4) {
        //走订单
        //全款
        this.type = 6;
        api = "/api/v4_2/queen/submit";
        this.date = "";
      } else if (this.activity_status == 2) {
        //走订单
        //抢购中
        this.type = 5;
        this.kou_credit = 0;
        this.date = "";
        api = "/api/v4_2/queen/submit";
      } else {
        this.type = 3;
        this.kou_credit = 0;
        obj = {
          project_id: that.mallID,
          appointment_time: that.date,
          service_phone: that.telNum,
          ticket_id: that.ticket_id,
          wechat: that.wetchartNum,
          type: that.type,
          credit: that.kou_credit,
          hospital_id: that.mall.hospital_id
        };
      }
      common.mmk_Loading(0);
      common.fly_post(api, obj, msg => {
        common.mmk_Loading(1);
        let res = msg.data;
        if (res.status_code == 0) {
          this.order_sn = res.data.order_sn;
          if (num == 1) {
            //支付金额为0 （积分抵扣后为0 、普通项目用了优惠券后为0）
            if (this.activity_status == 2 || this.activity_status == 4) {
              //全款项目和抢购项目
              wx.redirectTo({ url: "/pages/package_mine/project_order_list/main" });
            } else {
              //普通项目支付
              wx.redirectTo({ url: "/pages/package_projects/booking_success/main" });
            }
          } else if (num == 2) {
            if (this.activity_status == 2 || this.activity_status == 4) {
              //全款项目和抢购项目支付
              pay(
                res.data.body_title,
                this.order_sn,
                res.data.order_price,
                "project_full_order"
              );
            } else {
              //普通项目支付
              pay(
                res.data.body_title,
                this.order_sn,
                res.data.order_price,
                "project"
              );
            }
          }
        } else if (res.status_code == 2188) {
          wx.showModal({
            title: "提示",
            content: "活动已结束，请重新进行预约",
            showCancel: false,
            confirmText: "确定",
            confirmColor: "#FF383E",
            success: function (res) {
              if (res.confirm) {
                wx.redirectTo({
                  url: "/pages/package_projects/project_detail/main?id=" + this.mallID
                });
              }
            }
          });
        } else if (res.status_code == 2191) {
          wx.showModal({
            title: "",
            content: "项目正在抢购，请重新进行预约",
            showCancel: false,
            confirmText: "确定",
            confirmColor: "#FF383E",
            success: function (res) {
              if (res.confirm) {
                wx.redirectTo({
                  url: "/pages/package_projects/project_detail/main?id=" + this.mallID
                });
              }
            }
          });
        } else if (res.status_code == 2214) {
          wx.showModal({
            title: "",
            content: res.message,
            showCancel: false,
            confirmText: "我知道了",
            confirmColor: "#FF383E",
            success: function (res) {
              if (res.confirm) {
                // wx.redirectTo({ url: '/pages/project_detail/main?id=' + this.mallID });
              }
            }
          });
        } else if (res.status_code == 1027) {
          //未进行一级认证
          common.mmk_Loading(2, res.message);
          // wx.navigateTo({ url: "/pages/identification/main?status=1" });
        } else {
          common.mmk_Loading(2, res.message);
          return false;
        }
      });
    },
    // 点击优惠券
    toTicketDetail () {
      this.ticket_mark = true;
    },
    // 关闭优惠券
    closeTicketBox () {
      this.ticket_mark = false;
    },
    // 使用优惠券
    checkTicket (item) {
      this.ticket_array.forEach(element => {
        element.is_use = 1;
      });
      item.is_use = 2;
      this.type_name = item.type_name;
      this.ticket_id = item.id;
      this.ticket_data = item
      if (item.dedicated_status == 1) {
        //是否为免费预约券
        this.discount = this.appointment_price;
      } else {
        this.discount = item.type_money;
      }
      if (this.activity_status == 4) {
        //积分抵扣项目
        let jisuan_jifen = (
          (this.all_price * 100 - this.discount * 100) / 100
        );
        //使用优惠券后的价格
        // this.kou_credit = parseFloat(this.real_kou * 100 / 100);
        if (
          (jisuan_jifen - this.real_kou < 0 && jisuan_jifen > 1) ||
          (jisuan_jifen - this.real_kou < 0 && jisuan_jifen <= 0)
        ) {
          if (
            ((this.all_price * 100 - this.discount * 100) / 100) > 0
          ) {
            this.getOrderPoint();
          }
        }
        if (jisuan_jifen - this.real_kou > 0) {
          //积分全部用
          let can_use;
          if (jisuan_jifen > this.real_kou) {
            can_use = this.real_kou;
          } else {
            can_use = jisuan_jifen;
          }
          this.real_kou = can_use;
          this.dikou_point =
            (this.all_price * 100 - this.kou_credit * 100) / 100;
          this.getOrderPoint();
        }
        //使用完优惠券价格0~1不能使用积分抵扣
        if (jisuan_jifen < 1 && jisuan_jifen > 0) {
        }

        //总价-优惠券-抵扣积分之后小于0
      } else {
        // 预约项目
        if (
          (this.appointment_price * 100 - this.discount * 100) / 100 <
          0
        ) {
          this.totalCost = (0).toFixed(2);
        } else {
          //   this.totalCost = (
          //     (this.appointment_price * 100 - this.discount * 100) /
          //     100
          //   );
        }
      }
      this.ticket_mark = false;
    },
    // 积分加减
    creadite_fix (e) {
      switch (e) {
        case 1:
          if (this.kou_credit < this.real_kou) {
            this.kou_credit++;
          }
          break;
        case 0:
          if (this.kou_credit > 0) {
            this.kou_credit--;
          }
          break;

        default:
          break;
      }
      // this.dikou_point = (this.all_price * 100 - this.kou_credit * 100) / 100;
    },
    credite_input () {
      //积分输入
      let jisuan_jifen = this.all_price;
      let can_use;
      //   if (jisuan_jifen > this.real_kou) {
      //     can_use = this.real_kou;
      //   } else {
      //     can_use = jisuan_jifen;
      //   }
      can_use = jisuan_jifen;

      if (this.kou_credit >= can_use) {
        this.kou_credit = parseInt(can_use);
        // this.dikou_point = (this.all_price * 100 - this.kou_credit * 100) / 100;
        this.getOrderPoint();
      }
      //输入积分大于0且小于最大可使用时显示输入积分，正则去除数字前面的0
      if (can_use - this.kou_credit > 0 && this.kou_credit > 0) {
        this.kou_credit = (this.kou_credit + "").replace(/\b(0+)/gi, "");
        // this.dikou_point = (this.all_price * 100 - this.kou_credit * 100) / 100;
        this.getOrderPoint();
      }
      //输入积分小于0或者为空时显示为0
      if (this.kou_credit - 0 <= 0 || this.kou_credit == "") {
        this.kou_credit = 0;
        this.dikou_point = (this.all_price * 100 - this.kou_credit * 100) / 100;
      }
    },
    point_init () {
      //进页面计算输入框的积分显示
      if (this.mall.plus_price > 0) {
        this.all_price =
          (this.mall.project_price * 100 - (this.mall.plus_price || 0) * 100) /
          100;
      }
      //   判断用户的积分是否大于可抵扣积分
      if (this.user_credit < this.deduction_credit) {
        this.kou_credit = this.user_credit;
        this.dikou_point = (this.all_price * 100 - this.kou_credit * 100) / 100;
        this.ticket_array = this.ticket_array.filter(val => {
          return val.type_money < this.dikou_point;
        });
        this.getOrderPoint();
      } else {
        // this.kou_credit = (this.user_credit * 100 - this.mall.plus_price * 100) / 100;
        this.kou_credit = parseInt(
          this.all_price > this.deduction_credit
            ? this.deduction_credit
            : this.all_price
        );
        this.dikou_point = (this.all_price * 100 - this.kou_credit * 100) / 100;
        this.ticket_array = this.ticket_array.filter(val => {
          return val.type_money < this.dikou_point;
        });
        this.getOrderPoint();
      }
    },
    scroll () { },
    scrollmain () { },
    doctorDetail () {
      this.$refs.mychild.toDetail();
    },
    clearEmoji () {
      // 禁止输入表情
      this.wetchartNum = this.wetchartNum.replace(
        /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g,
        ""
      );
      //禁止输入中文
      this.wetchartNum = this.wetchartNum.replace(
        /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g,
        ""
      );
    },
    //订单消费积分计算
    getOrderPoint () {
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_2/order/order_submit",
        {
          order_credit: this.kou_credit
        },
        result => {
          common.mmk_Loading(1);
          let res = result.data;
          if (res.status_code == 0) {
            this.user_credit_mask = res.data.user_credit;
          } else {
            // common.mmk_Loading(2,res.message);
          }
        }
      );
    },
    getEndtime () {
      let y = this.start_year; //当前年
      let m = this.start_month; //月
      let d = this.start_date; //日
      this.currentdate = y + "-" + m + "-" + d;
      if (this.endtime != "0") {
        this.end_time = new Date(this.endtime * 1000).Format("yyyy-MM-dd");
      } else {
        if (m < 12) {
          m = m + 1;
        }
        if (this.start_month == 12) {
          m = 1;
          y = this.start_year + 1;
        }
        // 判断日期
        if (m !== 2) {
          if ((m == 4 || m == 6 || m == 9 || m == 11) && d > 30) {
            d = 30;
          }
        } else {
          //判断是否是闰年
          if (((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) && d > 29) {
            d = 29;
          } else if (d > 28) {
            d = 28;
          }
        }
        this.end_time = y + "-" + m + "-" + d;
      }
    },
    // 跳转PLUS
    to_plus () {
      wx.switchTab({ url: '/pages/plus/main' });
    }
  }
};
</script>
<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  background-color: #f3f4f6;
  position: relative;
  .project-detail {
    margin: 10px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 12px;
    display: flex;
    .project-logo {
      width: 114px;
      height: 114px;
      background: rgba(230, 230, 230, 1);
      border-radius: 5px;
      overflow: hidden;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .project-info {
      flex: 1;
      margin-left: 10px;
      position: relative;
      .project-name {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 21px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .hos-name {
        font-size: 12px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 16px;
        margin-top: 4px;
      }
      .project-price {
        position: absolute;
        bottom: 0px;
        left: 0px;
        .rmb {
          display: inline-block;
          vertical-align: middle;
          .icon {
            font-size: 12px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(255, 56, 62, 1);
            line-height: 16px;
            display: inline-block;
            vertical-align: bottom;
          }
          .num {
            font-size: 18px;
            font-family: "PingFangSC-Medium", "PingFang SC";
            font-weight: 500;
            color: rgba(255, 56, 62, 1);
            line-height: 20px;
            display: inline-block;
            vertical-align: bottom;
          }
        }
        .coin {
          display: inline-block;
          vertical-align: middle;
          margin-left: 8px;
          .coin-item {
            .icon {
              width: 12px;
              height: 12px;
              margin-right: 1px;
              display: inline-block;
              vertical-align: middle;
            }
            .tip {
              font-size: 10px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              line-height: 14px;
              display: inline-block;
              vertical-align: middle;
            }
            &.gold {
              .tip {
                color: rgba(245, 208, 64, 1);
              }
            }
            &.silver {
              .tip {
                color: rgba(165, 179, 185, 1);
              }
            }
          }
        }
      }
    }
  }
  .main-form {
    margin: 10px;
    background: rgba(255, 255, 255, 1);
    border-radius: 6px;
    .tip {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 44px;
    }
    .picker,
    .text,
    .ticket_list {
      width: 100%;
      height: 44px;
      box-sizing: border-box;
      line-height: 44px;
      padding: 0 10px;
      font-size: 14px;
      position: relative;
      display: flex;
      color: #666;
      background-color: #fff;
    }

    .text4 {
      font-size: 12px;
      color: #666;
      padding-left: 15px;
      margin-bottom: 10px;
      .item {
        font-size: 14px;
        color: #ff7100;
      }
    }
    .text5 {
      height: 44px;
      color: #333;
      font-size: 14px;
      // margin-bottom: 10px;
      position: relative;
      .red {
        color: #ff383e;
      }
      .chhoose_use_sel {
        text-align: center;
        width: 28%;
        position: absolute;
        right: 1.5%;
        top: 25%;
        line-height: 20px;
        .num_less,
        .num_add {
          border: solid 1px #cccccc;
          display: inline-block;
          width: 20px;
          height: 20px;
        }
        .num_self {
          border: solid 1px #cccccc;
          display: inline-block;
          width: 44px;
          height: 12px;
          min-height: 20px;
          vertical-align: top;
          line-height: 12px;
        }
      }
    }
    .date_unde {
      color: #999;
      position: absolute;
      left: 40%;
    }
    .date_value {
      color: #999;
      position: absolute;
      left: 76px;
      top: 0;
    }
    .right_icon {
      width: 30px;
      height: 30px;
      position: absolute;
      right: 0;
    }
    .tel_input {
      width: 70%;
      display: inline-block;
      height: 44px;
      line-height: 44px;
      margin-right: 5px;
      position: absolute;
      left: 76px;
      top: 0;
      color: #999;
    }
    .service_tel {
      font-size: 14px;
      color: #999;
      position: absolute;
      left: 30%;
      top: 1%;
    }
    .right {
      width: 24px;
      height: 24px;
      position: absolute;
      right: 1.5%;
      top: 20%;
    }
  }
  .ticket-bar {
    margin: 0px 10px;
    background-color: #fff;
    border-radius: 5px;
    padding: 0 10px;
    .t-name {
      font-size: 14px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(29, 29, 29, 1);
      line-height: 42px;
      float: left;
      .t-tip {
       padding: 0 1px;
        height: 18px;
        background: rgba(255, 237, 243, 1);
        border-radius: 2px;
        font-size: 10px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(255, 115, 164, 1);
        line-height: 18px;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
      }
    }
    .t-money {
      font-size: 14px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(255, 56, 62, 1);
      float: right;
      line-height: 42px;
    }
  }
  // 订单信息
  .order-info {
    margin: 10px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    padding: 0 10px 11px 10px;
    .info-item {
      margin-top: 12px;
      vertical-align: middle;
      .item-l {
        float: left;
        font-size: 12px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 21px;
      }
      .item-r {
        float: right;
        &.price {
          .money {
            display: inline-block;
            vertical-align: middle;

            font-size: 14px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            display: inline-block;
            vertical-align: middle;
          }
          .icon-and {
            color: rgba(202, 202, 202, 1);
            font-size: 10px;
            margin: 0px 2px;
            display: inline-block;
            vertical-align: middle;
          }
          .coin {
            display: inline-block;
            vertical-align: middle;
            .icon {
              width: 12px;
              height: 12px;
              display: inline-block;
              vertical-align: middle;
              margin-left: 2px;
            }
            .num {
              font-size: 14px;
              font-family: "PingFangSC-Regular", "PingFang SC";
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              display: inline-block;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
  //   底部提示
  .adult {
    margin-top: 26px;
    font-size: 12px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: rgba(245, 157, 97, 1);
    line-height: 12px;
    text-align: center;
    .icon {
      width: 12px;
      height: 12px;
      display: inline-block;
      vertical-align: bottom;
    }
  }
  // 底部栏
  .bottom-bar {
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -2px 5px 0px rgba(229, 229, 229, 0.48);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    .total_bottom {
      font-size: 14px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 20px;
      display: inline-block;
      vertical-align: baseline;
      float: right;
      line-height: 48px;
      .money_icon {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(255, 56, 62, 1);
        line-height: 16px;
        display: inline-block;
        vertical-align: baseline;
      }
      .money {
        font-size: 20px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(255, 56, 62, 1);
        line-height: 20px;
        display: inline-block;
        vertical-align: baseline;
      }
    }
    .submit-btn {
      width: 106px;
      height: 38px;
      background: linear-gradient(
        226deg,
        rgba(254, 120, 161, 1) 0%,
        rgba(254, 123, 136, 1) 100%
      );
      border-radius: 25px;
      font-size: 14px;
      font-family: "PingFangSC-Medium", "PingFang SC";
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 38px;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
      float: right;
      margin: 5px 5px 0 16px;
    }
  }
}
</style>


